SHOW CODE
COPY URL

APPLE DEVICES INFO

This section shows actual dimensions of Apple devices.

If you want to create a set of device, you can change input values to get widths of devices calculated via your base width. Type some numbers and see the changes.

iMac

Dimensions
Based on 21,5 inch

Height: 45.0 cm (17.7 inches) Width: 52.8 cm (20.8 inches) Depth: 17.5 cm (6.9 inches)

px

Mac Book

Dimensions
Based on 13 inch

Height: 1,8 cm (0.71 inches) Width: 31,4 cm (12.35 inches) Depth: 21,9 cm (8.62 inches)

px

iPad 3

Dimensions
Based on 3rd gen

Height: 24.12 cm (9.50 inches) Width: 18.57 cm (7.31 inches) Depth: 0.94 cm (0.37 inch)

px

iPhone 4

Dimensions
Based on 4s version

Height: 11.5 cm (4.5 inches) Width: 5.9 cm (2.31 inches) Depth: 0.9 cm (0.37 inches)

px

iPhone 5

Dimensions
Based on 5s version

Height: 12.3 cm (4.87 inches) Width: 5.86 cm (2.31 inches) Depth: 0.76 cm (0.3 inch)

px

iPhone 6

Dimensions
Based on non-plus version

Height: 13.81 cm (5.44 inches) Width: 6.7 cm (2.64 inches) Depth: 0.69 cm (0.27 inch)

px

EXAMPLES OF USAGE

This section shows couple of examples, where to use Pure CSS Apple Devices. Beyond these, it belongs to your imagination.

CONTENT SLIDER

Simple slider made with Owl Carousel. Content must be append into .pca-inner class.

DEVICE MORPH ANIMATION

With a few lines of Javascript (only by adding and removing class), you can transform one device to another using CSS3 animation.

CREATING WEB PAGE TEMPLATES

When designing web page templates, it's essential to present your work in a realistic context. Our pure CSS devices are perfect for embedding into templates, whether for landing pages, portfolios, or product showcases. They are lightweight, scalable, and image-free. For those seeking inspiration or ready-made solutions, exploring resources dedicated to creating web page templates can be incredibly helpful. Using our devices, you can add authenticity to your mockups and demonstrate responsive design effectively. A great template is not only visually appealing but also functional and adaptive—our CSS-generated Apple devices help highlight exactly that. Whether you are building a personal project or a client website, integrating such visual elements elevates the user experience. And if you need a starting point, checking out platforms that specialize in template design can save time and spark creativity. Remember, the process of crafting templates is both an art and a science, and having the right tools makes all the difference.